import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components';
import { AtButton , AtMessage , AtModal , AtModalHeader , AtInput, AtModalContent , AtModalAction  } from 'taro-ui';
import { getUserInfo , applyMoney } from '../../util/api';
import './moneycard.scss';

export default class MoneyCard extends Component {
    config = {
        navigationBarTitleText:"我的钱包",
    }
    constructor(props) {
        super(props);
        this.state = {
            allMoeny:"",
            isOpened:false,
            money:"",
            name:"",
            phone:"",
        }
    }
    componentWillMount(){
        getUserInfo().then( res => {
            if(res.code == 0){
                this.setState({allMoeny:res.data.money})
            }
        })
    }
    onMoneyChange(value){
        this.setState({money:value});
        return value
    }
    onNameChange(value){
        this.setState({name:value});
        return value
    }
    onPhoneChange(value){
        this.setState({phone:value});
        return value
    }
    cancleBox(){
        this.setState({money:"",isOpened:false})
    }
    openBox(){
        this.setState({money:"",isOpened:true})
    }
    agreebox(){
        let { money , allMoeny , phone , name} = this.state;
        if(!phone){
            Taro.atMessage({
                message:"请输入支付宝账号",
                type:"error"
            })
            return false
        }
        if(!name){
            Taro.atMessage({
                message:"请输入支付宝名称",
                type:"error"
            })
            return false
        }
        if(!money){
            Taro.atMessage({
                message:"请输入提现金额",
                type:"error"
            })
            return false
        }
        if(Number(money) > Number(allMoeny) || Number(money) == 0){
            Taro.atMessage({
                message:"请输入合法金额",
                type:"error"
            })
            return false
        }
        this.setState({money:"",isOpened:false})
        applyMoney({money:money,name,account:phone}).then(res => {
            if(res.code == 0){
                Taro.showModal({
                    title:"提示",
                    content:res.msg
                }).then( res => {
                    Taro.navigateBack();
                })
            }else{
                Taro.showModal({
                    title:"提示",
                    content:res.msg
                })
            }
        })
    }
    render(){
        let { isOpened , allMoeny , name , money , phone} =  this.state;
        return (
            <View className='moneycard'>
                <View className='money-card flex flex-wrap align-content-center'>
                    <View className='money'>{allMoeny}</View>
                    <View className='txt'>￥余额</View>
                </View>
                <AtButton className='next-tip' type='primary' size='normal' onClick={this.openBox.bind(this)}>提现</AtButton>
                <AtMessage />
                <AtModal isOpened={isOpened}>
                    <AtModalHeader>请输入提现金额</AtModalHeader>
                        <AtInput
                            name='value'
                            title='支付宝姓名'
                            type='text'
                            placeholder='请输入支付宝姓名'
                            value={name}
                            border={true}
                            onChange={this.onNameChange.bind(this)}
                        />
                        <AtInput
                            name='value'
                            title='支付宝账号'
                            type='text'
                            placeholder='请输入支付宝账号'
                            value={phone}
                            border={true}
                            onChange={this.onPhoneChange.bind(this)}
                        />
                        <AtInput
                            name='value'
                            title='金额'
                            type='digit'
                            placeholder='请输入提现金额'
                            value={money}
                            border={false}
                            onChange={this.onMoneyChange.bind(this)}
                        />
                    <AtModalAction> <Button onClick={this.cancleBox.bind(this)}>取消</Button> <Button onClick={this.agreebox.bind(this)}>确定</Button> </AtModalAction>
                </AtModal>
            </View>
        )
    }
    
}